<script setup>
import { ref, onMounted } from "vue";

let activeNames = ref("1");
let bookmarksList = ref(null);
function handlerBookmarks(data) {
  if(!data) return [];
  let newArr = [];
  let noClassArr = [];
  for (let i = 0; i < data.children.length; i++) {
    const item = data.children[i];
    if (item.children) {
      newArr.push(item);
    } else {
      noClassArr.push(item);
    }
  }
  let noClassObj = {
    title: "未分类",
    children: noClassArr,
    id: "0000",
  };
  return [...newArr, noClassObj];
}
onMounted(() => {
  bookmarksList.value = handlerBookmarks(
    JSON.parse(localStorage.getItem("current_bookmarks"))
  );
});

function handleChange(e) {
  console.log("handlechange", e);
}

function clickItemFn(data) {
  window.open(data.url);
}
</script>
<template>
  <div class="bookmark-com-wrapper">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item
        :title="item.title"
        :name="item.id"
        v-for="item in bookmarksList"
        :key="item.id"
      >
        <ul v-if="item.children && item.children.length > 0">
          <li v-for="item2 in item.children" :key="item2.id" @click="clickItemFn(item2)">
            <i></i><span class="ellipsis-s">{{ item2.title }}</span>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style lang="scss">
.el-collapse,
.el-collapse-item,
.el-collapse-item__header,
.el-collapse-item__wrap,
.el-collapse-item__content {
  background-color: transparent !important;
  color: #fff !important;
  border-style: none !important;
  .el-collapse-item__arrow {
    color: #fff !important;
  }
}
.el-collapse-item__header {
  font-size: 16px !important;
  font-weight: 700 !important;
}
</style>
<style lang="scss" scoped>
ul,
li {
  color: #fff;
  cursor: pointer;
  line-height: 28px;
  font-size: 14px !important;
}
li {
  &:hover {
    color: #315efb;
  }
}
</style>
